<template>
    <div>
        <h2>汽车信息:</h2>
        <h3>汽车品牌：{{ car.brand }}</h3>
        <h3>汽车价格：{{ car.price }}---{{ pe }}</h3>
        <button @click="changePrice">修改汽车价格</button>
        <button @click="changeBrand">修改汽车品牌</button>

    </div>
</template>

<script setup lang="ts" name="Person">
import {reactive, ref, toRef, toRefs} from "vue";

let car = reactive({
    brand: '奔驰',
    price: 100
})
// 解构 从响应式数据中解构出数据时，依然可以具有响应式
let {brand,price} = toRefs(car)

let pe = toRef(car,'price')
function changeBrand() {
    brand.value = '雅迪'
}

function changePrice() {
    price.value += 10
}

</script>

<style scoped>
button {
    margin-right: 10px;
}
</style>
